<template>
	<view class="layout">
		<view class="noteTitle">
			<view class="title">
				作业标题
			</view>
			<view class="content">
				<input type="text" placeholder="作业标题" />
			</view>
		</view>
		<view class="noteZhaiyao">
			<view class="title">
				作业内容
			</view>
			<view class="content">
				<textarea name="" id="" placeholder="作业内容"></textarea>
			</view>
		</view>
		<view class="noteContent">
			<view class="title">
				我的作答
			</view>

			<view class="lessons">
				<view class="container">
					<view class="page-body">
						<view class='wrapper'>
							<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
								<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu"
									data-name="bold">
								</view>
								<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti"
									data-name="italic">
								</view>
								<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
									data-name="strike"></view>

								<view :class="formats.align === 'center' ? 'ql-active' : ''"
									class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
								<view :class="formats.align === 'right' ? 'ql-active' : ''"
									class="iconfont icon-youduiqi" data-name="align" data-value="right">
								</view>
								<view :class="formats.align === 'justify' ? 'ql-active' : ''"
									class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>



								<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
									data-name="fontFamily" data-value="Pacifico"></view>
								<view :class="formats.fontSize === '24px' ? 'ql-active' : ''"
									class="iconfont icon-fontsize" data-name="fontSize" data-value="24px"></view>

								<view :class="formats.color === '#0000ff' ? 'ql-active' : ''"
									class="iconfont icon-text_color" data-name="color" data-value="#0000ff"></view>
								<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
									class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00">
								</view>


								<view class="iconfont icon-undo" @tap="undo"></view>
								<view class="iconfont icon-redo" @tap="redo"></view>


								<view class="iconfont icon-charutupian" @tap="insertImage"></view>

							</view>


							<!-- 文本区域 -->
							<view class="editor-wrapper">
								<editor id="editor" class="ql-container" placeholder="输入内容详情..." show-img-size
									show-img-toolbar show-img-resize @statuschange="onStatusChange"
									:read-only="readOnly" @ready="onEditorReady">
								</editor>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="buttonarea">
				<button @click="submit">提交作业</button>
				<button @click="aiAssay">AI分析</button>
			</view>
		</view>
		<uni-popup ref="infopopup" type="bottom">
			<view class="infopop">
				<view class="header">
					<view></view>
					<view class="title">
						AI分析
					</view>
					<view class="close" @click="closer">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y="true">
					<view class="content">
						<text>
							此处省略一万字......
							此处省略一万字......
							此处省略一万字......
							此处省略一万字......
							此处省略一万字......
							此处省略一万字......
							此处省略一万字......
							此处省略一万字......
							此处省略一万字......
							此处省略一万字......
						</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

	</view>
	<view class=".safe-area-inset-bottom">

	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import apis from '../../api/apis.js'
	const readOnly = ref(false);
	const formats = ref({});
	const infopopup = ref(null)
	const id = ref(0)
	const courseId = ref(0)
	const homeworkContent = ref('')
	const homeworkSubmission = ref({})
	onLoad((e) => {
		id.value = e.id
		courseId.value = e.courseResourceId
	})
	
	const homework = ref({})
	
	const closer = () => {
		infopopup.value.close()
	}
	
	const getEditorContent = () => {
		uni.createSelectorQuery().select('#editor').context((res) => {
			let editorCtx = res.context;
			// console.log(editorCtx)
			// 获取编辑的内容   html格式或text都有
			editorCtx.getContents({
				success: function(A) {
					// console.log("文本详情：", A)
					// console.log("html：", A.html)
					homeworkContent.value = A.html
					console.log(homeworkContent.value)
				},
				fail: function(A) {}
			})
		}).exec()
	}
	// 设置富文本编辑的内容
	const setEditorContent = () => {
		uni.createSelectorQuery().select('#editor').context((res) => {
			let editorCtx = res.context;
			// console.log(editorCtx)
			// 获取编辑的内容   html格式或text都有
			editorCtx.setContents({
				html: homeworkContent.value,
				success: () => {
					console.log("设置内容成功");
				},
				fail: (A) => {
					console.error("设置内容失败：", A);
				}
			})
		}).exec()
	}
	
	
	const submit =async ()=>{
		getEditorContent()
		console.log(id.value)
		console.log(courseId.value)
		console.log(homeworkContent.value)
		homeworkSubmission.value.content = homeworkContent.value
		homeworkSubmission.value.homeWorkId = id.value
		homeworkSubmission.value.courseResourceId = courseId.value
		let res = await apis.postStudentHomework(homeworkSubmission.value).then(res=>{
			uni.showToast({
				title:'提交成功'
			})
		})
	}
	
	// 方法
	const format = (e) => {
		const {
			name,
			value
		} = e.target.dataset;
		if (!name) return;
		editorCtx.value.format(name, value);
	};

	const onStatusChange = (e) => {
		const formatsValue = e.detail;
		formats.value = formatsValue;
	};

	const onEditorReady = () => {
		if (process.env.VUE_APP_PLATFORM === 'MP-BAIDU') {
			const editorLib = requireDynamicLib('editorLib');
			editorCtx.value = editorLib.createEditorContext('editor');
		} else {
			uni.createSelectorQuery().select('#editor').context((res) => {
				editorCtx.value = res.context;
			}).exec();
		}
	};

	const undo = () => {
		editorCtx.value.undo();
	};

	const redo = () => {
		editorCtx.value.redo();
	};

	const insertDivider = () => {
		editorCtx.value.insertDivider({
			success: () => {
				console.log('insert divider success');
			}
		});
	};

	const clear = () => {
		uni.showModal({
			title: '清空编辑器',
			content: '确定清空编辑器全部内容？',
			success: (res) => {
				if (res.confirm) {
					editorCtx.value.clear({
						success: () => {
							console.log('clear success');
						}
					});
				}
			}
		});
	};

	const removeFormat = () => {
		editorCtx.value.removeFormat();
	};

	const insertDate = () => {
		const date = new Date();
		const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
		editorCtx.value.insertText({
			text: formatDate
		});
	};

	const insertImage = () => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				editorCtx.value.insertImage({
					src: res.tempFilePaths[0],
					alt: '图像',
					success: () => {
						console.log('insert image success');
					}
				});
			}
		});
	};
	
	
	// 编辑器上下文
	const editorCtx = ref(null);
	
	// 生命周期钩子
	// onBeforeMount(() => {
	// 	// #ifndef MP-BAIDU
	// 	uni.loadFontFace({
	// 		family: 'Pacifico',
	// 		source: 'url("https://sungd.github.io/Pacifico.ttf")'
	// 	});
	// 	// #endif
	// });
	const aiAssay = () => {
		infopopup.value.open()
		const getAiAssay = async () => {
			let res = await apis.getHomeworkAnalysis(id.value)
			console.log(res)
		}
		getAiAssay()
	}
	
</script>

<style lang="scss" scoped>
	@import url("../../commons/styles/editor-icon.css");

	.layout {
		padding: 35rpx;
	}

	.noteTitle {
		.title {
			font-size: 35rpx;
			font-weight: 600;
			padding-bottom: 20rpx;

		}

		.content {

			margin-left: 30rpx;
			border: 1rpx solid #CCCCCC;
			width: 90%;
			height: 55rpx;
			margin-bottom: 20rpx;
		}
	}

	.noteZhaiyao {
		.title {
			font-size: 35rpx;
			font-weight: 600;
			padding-bottom: 20rpx;
		}

		.content {
			textarea {
				margin-left: 30rpx;
				border: 1rpx solid #CCCCCC;
				width: 90%;
				height: 105rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.noteContent {
		// border: 1rpx solid #CCCCCC;
		width: 95%;

		// margin: 0 auto;
		.title {
			font-size: 35rpx;
			font-weight: 600;
			padding-bottom: 20rpx;
		}

		.buttonarea {
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				color: white;
				background-color: #4A90E2;
			}
		}
	}
	.infopop {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
	
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.title {
				color: black;
				font-size: 30rpx;
				font-weight: 600;
				// padding-left: 6rpx;
			}
	scroll-view {
		max-height: 45vh;
	
		.content {
			// display: flex;
			padding: 16rpx 0;
			font-size: 32rpx;
			line-height: 1.7em;
	
		}
	}
	}
	}
	.lessons {
		// width: 80%;
		padding-left: 10rpx;
	}

	.page-body {
		// height: calc(100vh - var(--window-top) - var(--status-bar-height));
		height: 60vh;
		border: 1rpx solid #CCCCCC;
	}

	.wrapper {
		// height: 100%;
	}

	.editor-wrapper {
		// height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
		height: 50vh;
		background: #fff;
	}

	.iconfont {
		display: inline-block;
		// padding: 8px 8px;
		width: 24px;
		height: 5px;
		cursor: pointer;
		font-size: 20px;
	}

	.toolbar {
		// display: none;
		margin-bottom: -150rpx;
		box-sizing: border-box;
		// margin-right: 30rpx;
		border-bottom: 1rpx solid #CCCCCC;
		// height: 10vh;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	}

	.ql-container {
		box-sizing: border-box;
		// padding: 12px 15px;
		width: 100%;
		min-height: 30vh;
		height: 100%;
		// margin-top: 20px;
		font-size: 16px;
		line-height: 1.5;
	}

	.ql-active {
		color: #06c;
	}

	.ql-editor .ql-blank {
		height: 200rpx;
	}
</style>